.registro-wrapper { /* sección que centra vertical y horizontalmente los formularios */
  display: flex; /* contenedor flexible */
  justify-content: center; /* centra horizontalmente */
  align-items: center; /* centra verticalmente */
  height: 75vh; /* ocupa 75% de la altura de la ventana para centrado */
}

.registro-note { /* texto auxiliar debajo de los formularios */
  margin: 16px auto 0; /* espaciado superior y centrado */
  color:#fff; /* color de texto blanco */
  text-align:center; /* alinea el texto al centro */
  max-width: 420px; /* limita el ancho del párrafo */
  opacity: .9; /* ligero desvanecido para menor jerarquía */
}
.registro-note a { color: #f4c97d; /* color destacado para enlaces */
  text-decoration: underline; /* subraya enlaces para accesibilidad */
}

/* Card contenedor */
.registro-card { /* tarjeta contenedora con glass effect */
  width: 100%; /* ocupa todo el ancho disponible del contenedor padre */
  max-width: 520px; /* límite para mejor lectura en desktop */
  padding: 10px 12px 24px; /* relleno interior (top, sides, bottom) */
  border-radius: 16px; /* esquinas redondeadas */
  background: rgba(0,0,0,0.28); /* fondo oscuro translúcido */
  -webkit-backdrop-filter: blur(8px) brightness(0.9); /* soporte webkit para glass */
  backdrop-filter: blur(8px) brightness(0.9); /* glass estándar */
  border: 1px solid rgba(255,255,255,0.12); /* borde tenue para separar del fondo */
  text-align: center; /* centra títulos y contenido */
}
.registro-card h1 { margin: 8px 0 10px; /* espacio alrededor del título */
  color:#fff; /* título en blanco */
  font-weight:600; /* seminegrita para jerarquía */
}

/* Campos */
.field { position: relative; /* permite posicionar el botón de ver contraseña dentro */
  text-align:left; /* alinea etiquetas/inputs a la izquierda */
}
.field label {
  display:block; /* etiqueta ocupa línea completa */
  font-size:.9rem; /* tamaño de fuente compacto */
  color: rgba(255,255,255,.85); /* color claro con leve transparencia */
  margin-bottom:6px; /* espacio bajo la etiqueta */
}

.field input::placeholder{ color:rgba(255,255,255,.55); /* color del placeholder atenuado */ }
.field input:focus {
  border-color: rgba(244,201,125,.9); /* resalta borde con color de marca al enfocar */
  box-shadow: 0 0 0 3px rgba(244,201,125,.25); /* halo suave para accesibilidad al foco */
  background: rgba(255,255,255,0.12); /* incrementa ligeramente el fondo al enfocar */
}

/* Botón mostrar/ocultar contraseña */
.toggle-pass{
  position:absolute; /* posiciona el botón sobre el input */
  right:8px; /* lo alinea al borde derecho del campo */
  top:50%; /* lo centra verticalmente respecto al campo */
  transform: translateY(-50%); /* ajuste fino para centro vertical real */
  border:none; /* sin borde para look minimal */
  background: transparent; /* fondo transparente */
  color:#f4c97d; /* color de marca para el botón */
  font-weight:600; /* seminegrita para legibilidad */
  cursor:pointer; /* cursor de interacción */
  padding:4px 6px; /* área clicable cómoda */
}

/* Botones primarios */
.btn-primary, .rellenar-vidrio button[type="submit"]{
  padding:12px 14px; /* tamaño del botón */
  border:none; /* sin borde para estilo sólido */
  border-radius:10px; /* esquinas redondeadas */
  cursor:pointer; /* indica que es clicable */
  background:#f4c97d; /* color principal (dorado/amarillo) */
  color:#111; /* texto oscuro para contraste con el fondo claro */
  font-weight:700; /* peso fuerte para botones */
  transition: filter .15s ease, transform .02s linear; /* anima hover/active */
}
.btn-primary:hover{ filter: brightness(1.05); /* ligerísimo brillo al pasar el mouse */ }
.btn-primary:active{ transform: translateY(1px); /* feedback de click hundido */ }

/* Texto de ayuda bajo formularios */
.form-hint{
  font-size:.85rem; /* texto pequeño */
  color: rgba(255,255,255,.8); /* color tenue */
  text-align:center; /* centrado bajo el botón */
  margin: 4px 0 0; /* espacio superior mínimo */
}
.form-hint a{ color:#f4c97d; /* color de marca para enlaces */
  text-decoration: underline; /* subrayado para claridad */
}

/* Panel de cuenta (se mantiene) */
.cuenta-wrapper{ max-width:1100px; /* ancho máximo de la zona de cuenta */
  margin:40px auto; /* centra y separa verticalmente */
  padding:0 16px; /* respiración lateral en móviles */
}
.cuenta-card button{ padding:10px 14px; /* dimensión de botones dentro de tarjetas */
  border:none; /* sin borde */
  border-radius:8px; /* esquinas suaves */
  cursor:pointer; /* clicable */
  background:#f4c97d; /* color de marca */
  color:#111; /* texto legible */
}
.cuenta-secciones{ display:grid; /* layout en columnas responsivo */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* columnas flexibles según ancho */
  gap:14px; /* separación entre columnas */
  margin-top:10px; /* espacio superior respecto al header */
}
.cuenta-lista{ text-align:left; /* listas alineadas al inicio para lectura */ }
@media (max-width:700px){ .cuenta-secciones{ grid-template-columns:1fr; /* en móviles, una columna */ } }

/* ===== Tabs minimal para Mi perfil ===== */
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px; }
.tab-btn {
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color:#fff;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
}
.tab-btn.active { background:#f4c97d; color:#111; border-color:transparent; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.btn-link { background: transparent; color:#f4c97d; text-decoration: underline; }

/* ====== ARTES ====== */
.artes-hero{ max-width:1000px; margin:70px auto 10px; padding:0 16px; text-align:center; }
.artes-sub{ color:#fff; opacity:.9; margin:6px 0 6px; }
.artes-note{ color:#fff; opacity:.7; font-size:.9rem; }
.artes-wrapper{ max-width:1200px; margin:12px auto 40px; padding:0 16px; }
.artes-section{ margin:18px 0 26px; }


/* Lista de cómo funciona */
.artes-how{ color:#fff; opacity:.9; padding-left:16px; }
.artes-how li{ margin:6px 0; }

.gran-titulo-arte{
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  background:rgba(255, 255, 255, 0.009);
  -webkit-backdrop-filter: blur(4px) brightness(0.8);
  border-top: 1px solid rgba(255,255,255,0.3);
  border-bottom: 0.3px solid rgba(255, 255, 255, 0.171);
  max-width: 170px; /* ajustable */
  border-radius: 5px;
  backdrop-filter: blur(5px) brightness(0.7);
  color:#ffffff
}

/* Shine effect: moving highlight */
.gran-titulo-arte::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.157) 40% 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shine 5s infinite;
}
@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}